<template>
	<view style="background-color: ;">
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				开始时间
			</view>
			<view class="uni-list-cell-db">
				<picker :value="start" :range="array" @change="bindPickerChange">
					<view class="uni-input">{{array[start]}}</view>
				</picker>
			</view>
		</view>
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				结束时间
			</view>
			<view class="uni-list-cell-db">
				<picker :value="end" :range="array" @change="bindEndDateChange">
					<view class="uni-input">{{array[end]}}</view>
				</picker>
			</view>
		</view>

		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" :onzoom="true"/>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch
	} from 'vue';

	const props = defineProps(['title', 'data', 'up', 'down'])


	const start = ref(0)
	const end = ref(0)
	const opts = computed(() => {
		return {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 10, 0, 15],
			enableScroll: true,
			dataLabel: false,
			enableZoom: true, // 允许双指缩放
			update: true,
			legend: {},
			
			xAxis: {
				gridType: "dash",
				disableGrid: false,
				scrollShow: true,
				splitNumber: 13,
				itemCount: 13,
				scrollAlign: 'right', // 滚动到末尾
				fontSize: 10,
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2,
				showTitle: true,
				data: [
					{title: props.title}
				]
			},
			extra: {
				line: {
					type: "curve",
					width: 2,
					activeType: "hollow"
				},
				markLine: {
					data: [{
							value: props.up
						},
						{
							value: props.down
						},
					]
				}
			},
			scrollPosition: 'right'
		}
	})
	const startIndex = computed(() => {
		return data.value.indexOf(start.value)
	})
	const endIndex = computed(() => {
		return data.value.indexOf(end.value)
	})

	const dataC = computed(() => {
		return props.data.slice(start.value, end.value + 1)
	})
	const array = computed(() => {
		return props.data.map(item => item.date)
	})
	console.log(dataC.value)
	watch(array, (val) => {
		end.value = val.length - 1
		start.value = val.length - 30
	})

	const chartData = computed(() => {

		const categories = dataC.value.map(item => {
			return item.date.split('/')[1] + '.' + item.date.split('/')[2]
		})

		return {
			categories,
			series: [{
				name: '',
				data: dataC.value.map(item => item.value)
			}, ]
		}
	})


	function bindPickerChange(e) {
		start.value = e.detail.value
	}

	function bindEndDateChange(e) {
		end.value = e.detail.value
	}
</script>
<style lang="less" scoped>
	.uni-list-cell {
		background-color: #fff;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		padding: 5px 0;
	}

	.uni-list-cell-left {
		white-space: nowrap;
		font-size: 14px;
		padding: 0 15px;
	}

	.uni-list-cell-db,
	.uni-list-cell-right {
		flex: 1;
	}

	.uni-picker-container {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		z-index: 999;
		font-size: 16px;
	}
</style>